<template>
<!-- 双向绑定：
1.数据的变化引起视图的变化
2.用户在网页上的操作引起数据的变化 -->	
<input type="text" v-model="msg"/>
<br/>
<!-- :value绑定方式不能实现双向影响，只能够实现数据影响视图 -->
<input type="text" :value="msg"/>
<div>{{ '用户输入的内容：' + msg }}</div>
<hr/>
<!-- 实时计算求和 -->
<!-- NaN:代表一个不知道大小的数字 -->
<!-- 一个undefined + 一个数字就会得到NaN -->
<input type="text" v-model.number.lazy="a"/> 
+ 
<input type="text" v-model.number.lazy="b"/> = {{ a + b }}
</template>

<script setup>
import { ref } from 'vue'
const msg = ref('')
const a = ref()
const b = ref()
</script>

<style scoped>
</style>